<template lang="">
  <div class="box">
    <!-- <div class="top_box">
      <div class="top_btn">
        <t-button
          theme="primary"
          class="btn"
          type="submit"
          style="background-color: rgb(59, 182, 254); border: 0"
          >同步组织</t-button
        >
        <t-button
          theme="primary"
          class="btn"
          type="submit"
          style="background-color: rgb(59, 182, 254); border: 0"
          >导入组织</t-button
        >
      </div>
    </div> -->
    <div class="tab_box" v-for="(item, index) in zjlist" :key="index">
      <div class="title_box">
        <div class="left_box">
          {{ item.orgName }}<icon name="caret-down-small" />
        </div>
        <div class="right_box">
          <div @click="addchild('2', item)" style="cursor: pointer">
            修改名称
          </div>
          <div @click="addchild('1', item)" style="cursor: pointer">
            添加下级
          </div>
        </div>
      </div>
      <!-- pseudo_element这个是树形结构的竖线 需要遍历的时候加上这个就行，记住最后一个元素不要calss里面加这个pseudo_element -->
      <div v-for="(ite, index) in item.children" :key="index">
        <div class="one_level alignment">
          <div class="one_level_title pseudo_element">{{ ite.orgName }}</div>
          <div class="right_btn_box">
            <div style="cursor: pointer" @click="delet(ite)">删除</div>
            <div @click="addchild('2', ite)" style="cursor: pointer">
              修改名称
            </div>
            <div @click="addchild('1', ite)" style="cursor: pointer">
              添加下级
            </div>
            <div @click="addchild('3', item)" style="cursor: pointer">
              添加同级
            </div>
          </div>
        </div>
        <div v-for="(it, index) in ite.children" :key="index">
          <div class="one_level two_stage">
            <div class="tow_level_title pseudo_element">{{ it.orgName }}</div>
            <div class="right_btn_box">
              <div style="cursor: pointer" @click="delet(it)">删除</div>
              <div @click="addchild('2', it)" style="cursor: pointer">
                修改名称
              </div>
              <div @click="addchild('1', it)" style="cursor: pointer">
                添加下级
              </div>
              <div @click="addchild('3', ite)" style="cursor: pointer">
                添加同级
              </div>
            </div>
          </div>
          <div v-for="(i, index) in it.children" :key="index">
            <div class="one_level there_stage">
              <div class="there_level_title pseudo_element">
                {{ i.orgName }}
              </div>
              <div class="right_btn_box">
                <div style="cursor: pointer" @click="delet(i)">删除</div>
                <div @click="addchild('2', i)" style="cursor: pointer">
                  修改名称
                </div>
                <div @click="addchild('1', i)" style="cursor: pointer">
                  添加下级
                </div>
                <div @click="addchild('3', it)" style="cursor: pointer">
                  添加同级
                </div>
              </div>
            </div>
            <div
              class="one_level fo_stage"
              v-for="(ie, index) in i.children"
              :key="index"
            >
              <div class="fo_level_title pseudo_element">
                {{ ie.orgName }}
              </div>
              <div class="right_btn_box">
                <div style="cursor: pointer" @click="delet(ie)">删除</div>

                <div @click="addchild('2', ie)" style="cursor: pointer">
                  修改名称
                </div>
                <div @click="addchild('1', ie)" style="cursor: pointer">
                  添加下级
                </div>
                <div @click="addchild('3', i)" style="cursor: pointer">
                  添加同级
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zzjgw" v-if="zjlist.length === 0">该账号目前暂无组织架构</div>
    <!-- 添加对话框 -->
    <t-dialog v-model:visible="visible" :footer="false" header="同级添加">
      <t-form
        ref="form"
        :rules="rules"
        :data="formData1"
        :colon="true"
        @reset="onReset"
        @submit="onSubmit"
      >
        <t-form-item label="上级组织" name="parentOrgName">
          <t-cascader
            v-model="formData1.parentOrgName"
            :options="zjlist"
            clearable
            @change="onChange1"
          />
        </t-form-item>
        <t-form-item label="组织名称" name="orgName">
          <t-input
            v-model="formData1.orgName"
            placeholder="请输入内容"
          ></t-input>
        </t-form-item>
        <t-form-item label="组织地址" name="orglocation">
          <t-cascader
            v-model="formData1.orglocation"
            :options="options"
            clearable
            @change="onChange"
          />
        </t-form-item>
        <t-form-item label="组织类型" name="orgtype">
          <t-select v-model="formData1.orgtype">
            <t-option label="职能部门" value="职能部门" />
            <t-option label="子/分公司" value="子/分公司"></t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="组织编号" name="orgnumber" help="不填系统自动生成">
          <t-input
            v-model="formData1.orgnumber"
            placeholder="请输入内容"
          ></t-input>
        </t-form-item>
        <t-form-item>
          <t-space size="small">
            <t-button theme="primary" type="submit">保存</t-button>
            <t-button theme="default" variant="base" type="reset"
              >重置</t-button
            >
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
    <!-- 删除弹出框 -->
    <t-dialog
      v-model:visible="visible1"
      theme="info"
      header="确认删除"
      body="确认删除吗？"
      attach="body"
      :confirm-on-enter="false"
      :on-cancel="onCancel"
      :on-confirm="onConfirmAnother"
    />
  </div>
</template>
<script setup lang="jsx">
import { ref, onMounted, reactive, onActivated, onDeactivated } from "vue";
import {
  unitOgrListTree,
  addUnitOrg,
  updateUnitOrg,
  deleteUnitOrg,
} from "../../api/basic.js";
import { china } from "../../assets/china.js";
import {
  ErrorCircleFilledIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
} from "tdesign-icons-vue-next";
import { Icon } from "tdesign-icons-vue-next";
let visible = ref(false);
let visible1 = ref(false);
const formData1 = reactive({
  orgName: "",
  parentOrgName: "",
  orglocation: "",
  orgtype: "",
  orgnumber: "",
});
let form = ref(null);
let breakoff = ref(false);
const rules = {
  orgName: [{ required: true, message: "请填写名称" }],
  orglocation: [{ required: true, message: "请选择地址" }],
  orgtype: [{ required: true, message: "请选择类型" }],
  parentOrgName: [{ required: true, message: "请选择父级节点" }],
};
const staqc = ref(null);
const options = ref([]);
const zjlist = ref([]);
let dataLI1 = ref([]);
//处理级联选择器
const sele = () => {
  let arr = [];
  console.log(china);
  china.forEach((item) => {
    arr.push({
      label: item.name,
      value: item.code,
      children: (() => {
        let arr2 = [];
        item.areaList.forEach((ite) => {
          arr2.push({
            label: ite.name,
            value: ite.code,
            children: (() => {
              let arr3 = [];
              ite.areaList.forEach((it) => {
                arr3.push({
                  label: it.name,
                  value: it.code,
                });
              });
              return arr3;
            })(),
          });
        });
        return arr2;
      })(),
    });
  });
  options.value = arr;
};
const api = async () => {
  const res = await unitOgrListTree();
  let arr = [];
  res.data.forEach((item) => {
    arr.push({
      label: item.orgName,
      value: item.orgName,
      orgName: item.orgName,
      id: item.id,
      parentId: item.parentId,
      parentOrgName: item.parentOrgName,
      unitId: item.unitId,
      orgCreateTime: item.orgCreateTime,
      children: (() => {
        if (item.childrenOrg === undefined) return [];
        let arr2 = [];
        item.childrenOrg.forEach((ite) => {
          arr2.push({
            label: ite.orgName,
            value: ite.orgName,
            orgName: ite.orgName,
            id: ite.id,
            parentId: ite.parentId,
            parentOrgName: ite.parentOrgName,
            unitId: ite.unitId,
            orgCreateTime: ite.orgCreateTime,
            children: (() => {
              if (ite.childrenOrg === undefined) return [];
              let arr3 = [];
              ite.childrenOrg.forEach((it) => {
                arr3.push({
                  label: it.orgName,
                  value: it.orgName,
                  orgName: it.orgName,
                  id: it.id,
                  parentId: it.parentId,
                  parentOrgName: it.parentOrgName,
                  unitId: it.unitId,
                  orgCreateTime: it.orgCreateTime,
                  children: (() => {
                    if (it.childrenOrg === undefined) return [];
                    let arr4 = [];
                    it.childrenOrg.forEach((i) => {
                      arr4.push({
                        label: i.orgName,
                        value: i.orgName,
                        orgName: i.orgName,
                        id: i.id,
                        parentId: i.parentId,
                        parentOrgName: i.parentOrgName,
                        unitId: i.unitId,
                        orgCreateTime: i.orgCreateTime,
                        children: (() => {
                          if (i.childrenOrg === undefined) return [];
                          let arr5 = [];
                          i.childrenOrg.forEach((ie) => {
                            arr5.push({
                              label: ie.orgName,
                              value: ie.orgName,
                              orgName: ie.orgName,
                              id: ie.id,
                              parentId: ie.parentId,
                              parentOrgName: ie.parentOrgName,
                              unitId: ie.unitId,
                              orgCreateTime: ie.orgCreateTime,
                            });
                          });
                          return arr5;
                        })(),
                      });
                    });
                    return arr4;
                  })(),
                });
              });
              return arr3;
            })(),
          });
        });
        return arr2;
      })(),
    });
  });
  zjlist.value = arr;
  console.log(zjlist.value);
};
//删除
const delet = (e) => {
  visible1.value = true;
  dataLI1.value = e;
};
//删除确认
const onConfirmAnother = async (context) => {
  const res = await deleteUnitOrg({ id: dataLI1.value.id });
  visible1.value = false;
  api();
};
//添加,修改
const addchild = (stais, datav) => {
  form.value.reset();
  if (stais === "1") {
    //下级
    console.log(datav);
    formData1.parentOrgName = datav.orgName;
  } else if (stais === "2") {
    console.log(datav);
    formData1.orgName = datav.orgName;
    formData1.parentOrgName = datav.orgName;
    //修改
  } else {
    //同级
    console.log(datav);
    formData1.parentOrgName = datav.orgName;
  }
  staqc.value = stais;
  dataLI1.value = datav;
  visible.value = true;
};
//删除
//重置
const onReset = () => {};
//提交按钮
const onSubmit = async ({ validateResult }) => {
  if (validateResult === true) {
    var currentDate = new Date();
    var year = currentDate.getFullYear();
    var month = currentDate.getMonth() + 1; // 月份从0开始，所以需要加1
    var day = currentDate.getDate();
    if (Number(month) < 10) {
      month = "0" + month;
    }
    if (Number(day) < 10) {
      day = "0" + day;
    }
    if (staqc.value === "1") {
      //下级
      formData1.parentId = dataLI1.value.id;
      formData1.unitId = dataLI1.value.unitId;
      formData1.orgCreateTime = year + "-" + month + "-" + day + " 00:00:00";
      const res = await addUnitOrg(formData1);
      api();
    } else if (staqc.value === "2") {
      formData1.parentId = dataLI1.value.parentId;
      formData1.unitId = dataLI1.value.unitId;
      formData1.id = dataLI1.value.id;
      formData1.orgCreateTime = year + "-" + month + "-" + day + " 00:00:00";
      const rec = await updateUnitOrg(formData1);
      api();
      //修改
    } else {
      //同级
      formData1.parentId = dataLI1.value.parentId;
      formData1.unitId = dataLI1.value.unitId;
      formData1.orgCreateTime = year + "-" + month + "-" + day + " 00:00:00";
      const res = await addUnitOrg(formData1);
      api();
    }
    visible.value = false;
  }
};
onMounted(() => {
  api();
  sele();
  breakoff.value = true;
});
onActivated(() => {
  //缓存页面再启动函数
  if (breakoff.value !== true) {
    api();
    sele();
  }
});
</script>
<style lang="scss" scoped>
.box {
  width: calc(100% - 30px);
  padding-left: 20px;
  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;

    .top_btn {
      padding-right: 20px;
      text-align: right;
    }
    .btn {
      margin-left: 20px;
    }
  }
  .tab_box {
    // width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    // overflow-y: scroll;
    min-height: 500px;
    padding: 30px;
    .title_box {
      height: 60px;
      background-color: rgb(240, 247, 250);
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      .left_box {
      }
      .right_box {
        color: rgb(64, 149, 229);
        display: flex;
        padding: 0 40px;
        div:first-child {
          margin-right: 15px;
        }
      }
    }
    .alignment {
      // padding: 15px  60px 0  60px ;
      padding: 15px 40px 0 40px;
    }
    .two_stage {
      padding: 15px 60px 0 60px;
    }
    .there_stage {
      padding: 15px 80px 0 80px;
    }
    .fo_stage {
      padding: 15px 100px 0 100px;
    }
    .one_level {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      //   padding: 15px  40px 0  40px ;
      .one_level_title {
        // border: 1px solid red;
        background-color: rgb(151, 203, 231);
        padding: 5px 10px;
      }
      .tow_level_title {
        background-color: rgb(206, 229, 238);
        padding: 5px 10px;
      }
      .there_level_title {
        background-color: rgb(236, 236, 236);
        padding: 5px 10px;
      }
      .fo_level_title {
        background-color: rgb(255, 255, 255);
        border: solid 1px #000;
        padding: 5px 10px;
      }
      .right_btn_box {
        color: rgb(64, 149, 229);
        display: flex;
        div {
          margin-right: 15px;
        }
      }
    }
    /** 水平方向连线 */
    .pseudo_element:after {
      content: " ";
      position: absolute;
      top: 76px;
      left: 45px;
      width: 45px;
      border: none;
      border-top: 1px dashed #ddd;
    }
    .pseudo_element:not(:last-child):before {
      content: " ";
      position: absolute;
      top: 47px;
      left: 45px;
      height: 47px;
      border: none;
      border-left: 1px dashed #ddd;
    }
  }
}
.zzjgw {
  width: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
}
</style>
